import React from "react";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import style from "./material.module.css";
import { imagecut, imagedata, imgtu } from "../Picture/imgtu";

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps["items"] = [
  {
    key: "1",
    label: "素材",
    children: (
      <div>
        <div className={style.mbox}>
          <span style={{ background: "#337ffc" }}>形状</span>
          <span style={{ background: "#ff649a" }}>线条</span>
          <span style={{ background: "#ff6767" }}>插图</span>
          <span style={{ background: "#ffa849" }}>容器</span>
          <span style={{ background: "#35c79d" }}>边框</span>
          <span style={{ background: "#2daefe" }}>图标</span>
          <span style={{ background: "#ff844b" }}>AIGC</span>
          <span style={{ background: "#a761ff" }}>动图</span>
        </div>
        <div className={style.imageContainer}>
          {imagedata.map((v) => (
            <div key={v.id}>
              <p>{v.title}</p>
              {v.children.immg.map((immg, index) => (
                <img
                  key={index}
                  src={immg}
                  alt={`${v.title} image ${index + 1}`}
                  className={style.image}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    key: "2",
    label: "图片",
    children: (
      <div className={style.imgbox}>
        <button className={style.button1}>科技</button>
        <button className={style.button2}>商务</button>
        <button className={style.button3}>美食</button>
        <button className={style.button4}>教育</button>
        <div className={style.imageContainer1}>
          {imgtu.map((category) => (
            <div key={category.id}>
              <p>{category.title}</p>
              {category.children.imgs.map((img, index) => (
                <img
                  key={index}
                  src={img}
                  alt={`${category.title} image ${index + 1}`}
                  className={style.image1}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    key: "3",
    label: "视频",
    children: (
      <div className={style.imgbox}>
        <button className={style.button1}>商务</button>
        <button className={style.button2}>地产</button>
        <button className={style.button3}>教育</button>
        <button className={style.button4}>电商</button>
        <div className={style.imageContainer1}>
          {imagecut.map((category) => (
            <div key={category.id}>
              <p>{category.title}</p>
              {category.children.imgcut.map((img, index) => (
                <img
                  key={index}
                  src={img}
                  alt={`${category.title} image ${index + 1}`}
                  className={style.image1}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    key: "4",
    label: "音频",
    children: (
      <div className={style.im1}>
        {/* <img src={Batchdesignimages1} alt="" /> */}
        <p>暂无内容</p>
        <h6>
          点击图片上<img src=""></img>的进行收藏
        </h6>
      </div>
    ),
  },
];

function Index() {
  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  );
}

export default Index;
